<template>
	<view>
		<!-- <u-navbar title="看板" :title-size="35" :title-bold="true" :immersive="true" :background="background"
			:is-back="false" :border-bottom="false"></u-navbar> -->
		<view class="u-page">
			<view class="flex-col flex-auto group">
				<view class="flex-col section space-y-18">
					<view class="flex-col group_2 space-y-59">
						<text class="self-center text">订单</text>
					</view>
					<u-select v-model="show" :list="arealist"></u-select>
					<view class="flex-col" style="margin-top: 40rpx;">
						<view style="width: 100%; height: 38px;">
							<view style="margin: auto;display: flex;width: 94%;">
								<view style="width: 90px; height: 30px;" v-for="(item,index) in Alllist">
									<view
										style="font-size: 32rpx;font-family: PingFang SC;font-weight: bold;color: #FFFFFF;"
										@click="changeOpt(item,index)"
										:class="curId === index ? 'changetabs_active':'changetabs'">
										{{item.name}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="flex-col relative group_2 group_5 space-y-20">
					<view class="flex-col list-item" v-for="item in OrderList">
						<view class="flex-row justify-between items-center group_6">
							<view class="flex-row space-x-10">
								<image class="shrink-0 image_2" v-if="item.f_status==1"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/underway.png" />
								<image class="shrink-0 image_2" v-if="item.f_status==2"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/end.png" />
								<image class="shrink-0 image_2" v-if="item.f_status==0"
									src="https://gongxiangtaiqiu.axa2.com/taiqiu/cancel.png" />
								<view class="group_7">
									<text class="font_3">{{item.f_eq_no}}</text>
									<text class="font_4">台</text>
								</view>
							</view>
							<text class="font_5 text_4" v-if="item.f_status==1">进行中</text>
							<text class="font_5 text_4" v-if="item.f_status==0" style="color: #999999;">已取消</text>
							<text class="font_5 text_4" v-if="item.f_status==2" style="color: #FFA229;">已结束</text>
						</view>
						<view class="flex-row justify-between group_8">
							<text class="font_2">订单编号：</text>
							<text class="font_6 text_5">{{item.f_wx_no}}</text>
						</view>
						<view class="flex-row justify-between group_9">
							<text class="font_2">开台时间：</text>
							<text class="font_6 text_6">{{item.f_start_time?item.f_start_time:''}}</text>
						</view>
						<view class="flex-row justify-between group_10">
							<text class="font_2">订单时长：</text>
							<text class="font_7 text_7">{{countdown(item.f_use_long)?countdown(item.f_use_long):''}}</text>
						</view>
						<view class="flex-row justify-between group_11">
							<text class="font_2">产生费用：</text>
							<text class="font_7 text_8">￥{{item.f_sync_money}}元</text>
						</view>
						<view class="flex-row justify-between group_11">
							<text class="font_2">用户昵称：</text>
							<text class="font_7 text_8">{{item.has_user.f_nickName}}</text>
						</view>
						<view class="flex-row justify-between group_11">
							<text class="font_2">联系电话：</text>
							<text class="font_7 text_8">{{item.has_user.f_phone}}</text>
						</view>
						<view class="flex-row justify-between group_11">
							<text class="font_2">当前余额：</text>
							<text class="font_7 text_8">￥{{item.f_last_recharge}}元</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 20px;">
			<u-tabbar v-model="current1" :list="list"></u-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			OrderList: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				list: [{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/home_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/home.png",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/index/index',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/kanban_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/kanban.png",
						text: '看板',
						customIcon: false,
						pagePath: '/pages/Ewm/Ewm',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/dingdan_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/dingdan_tabbar.png",
						text: '订单',
						customIcon: false,
						pagePath: '/pages/message/message',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/center_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/center.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/main/main',
					},
				],
				current1: 0,
				show: false,
				arealist: [{
						value: '1',
						label: '铁西滑翔店'
					},
					{
						value: '2',
						label: '华强广场店铺'
					}
				],
				curId: 0,
				// OrderList: {},
				// #19c865 
				background: {
					backgroundColor: 'rgba(0,0,0,0)'
				},
				Alllist: [{
						name: '全部'
					}, {
						name: '进行中'
					}, {
						name: '已结束'
					},
					{
						name: '已取消'
					}
				],
			};
		},
		created() {
			if (uni.getStorageSync('Bshop_id') == '') {
				uni.showToast({
					icon: 'none',
					title: '请在首页选择店铺再查看'
				})
				return
			} else {
				this.shopOrder()
			}
			// uni.setNavigationBarTitle({
			// 					title: '未'
			// 				});
			// this.shopOrder()
		},
		methods: {
			countdown(time) {
				const that = this
				let day = parseInt(time / 60 / 60 / 24)
				let hr = parseInt(time / 60 / 60 % 24)
				let min = parseInt(time / 60 % 60)
				let sec = parseInt(time % 60)
				day = day > 9 ? day : '0' + day
				hr = hr > 9 ? hr : '0' + hr
				min = min > 9 ? min : '0' + min
				sec = sec > 9 ? sec : '0' + sec
				let newhr = parseInt(hr) + parseInt(day * 24)
				that.timelong = `${hr}:${min}:${sec}`
				console.log(that.timelong)
				return `${hr}:${min}:${sec}`
			},
			shopOrder() {
				this.$Api.shopOrderList({
					shopId: uni.getStorageSync('Bshop_id'),
					status: this.curId,
					page: 1,
					pageNum: 15,
				}).then(res => {
					this.OrderList = res.data.data.list
					console.log(res.data.data, '我是列表')
				}).catch(res => {})
			},
			changeOpt(item, index) {
				this.curId = index
				// this.shopOrder()
				this.$emit('changeIndex',index)
				console.log(this.curId)
			},
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/
	page {
		background-color: #f3f3f5;
	}

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center { 
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.changetabs {
		width: 180rpx;
		height: 36rpx;
		font-size: 27rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.changetabs_active {
		width: 180rpx;
		height: 36rpx;
		font-size: 27rpx;
		color: #1B1B1B;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.changetabs_active::after {
		content: "";
		position: absolute;
		left: 60rpx;
		bottom: -10px;
		width: 60rpx;
		height: 10rpx;
		border-bottom: 4rpx solid #FFA229;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.group {
		padding-bottom: 153rpx;
		overflow-y: auto;
	}

	.section {
		padding: 105rpx 0 392rpx;
		background-image: linear-gradient(0deg, #f3f3f5 0%, #19c865 61%, #19c865 100%);
	}

	.space-y-18>view:not(:first-child),
	.space-y-18>text:not(:first-child),
	.space-y-18>image:not(:first-child) {
		margin-top: 18rpx;
	}

	.group_2 {
		padding: 0 30rpx;
	}

	.space-y-59>view:not(:first-child),
	.space-y-59>text:not(:first-child),
	.space-y-59>image:not(:first-child) {
		margin-top: 59rpx;
	}

	.text {
		color: #ffffff;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 34rpx;
	}

	.font_1 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.font_2 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #999999;
	}

	.text_2 {
		color: #ffffff;
		font-weight: 700;
	}

	.image {
		width: 24rpx;
		height: 22rpx;
	}

	.group_3 {
		padding: 0 51rpx 19rpx;
	}

	.group_4 {
		padding: 19rpx 0 9rpx;
	}

	.text_3 {
		margin-right: 5rpx;
	}

	.section_2 {
		margin-left: 6rpx;
		background-color: #ffa229;
		border-radius: 3rpx;
		width: 40rpx;
		height: 6rpx;
	}

	.group_5 {
		margin-top: -392rpx;
	}

	.space-y-20>view:not(:first-child),
	.space-y-20>text:not(:first-child),
	.space-y-20>image:not(:first-child) {
		margin-top: 20rpx;
	}

	.list-item {
		padding: 0 24rpx 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_6 {
		padding: 30rpx 5rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 10rpx;
	}

	.image_2 {
		width: 30rpx;
		height: 30rpx;
	}

	.group_7 {
		line-height: 26rpx;
		height: 26rpx;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 700;
		color: #222222;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 700;
		color: #222222;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		font-weight: 500;
	}

	.text_4 {
		color: #19c865;
	}

	.group_8 {
		margin-top: 31rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 500;
		color: #222222;
	}

	.group_9 {
		margin-top: 19rpx;
		padding: 0 2rpx;
	}

	.group_10 {
		margin-top: 19rpx;
	}

	.font_7 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_7 {
		margin-right: 3rpx;
	}

	.group_11 {
		margin-top: 19rpx;
	}

	.text_8 {
		margin-right: 3rpx;
		line-height: 22rpx;
	}

	.text_6 {
		margin-right: 11rpx;
	}

	.text_5 {
		margin-right: 7rpx;
	}
</style>